<template>
    <div class="body">
        <div class="seach">
            <el-form :model="form" ref="form" label-width="0" :inline="true" size="normal">
                <el-form-item label="">
                    <el-input v-model="form.searchKey" placeholder="搜索子账户名称" maxlength="16">
                        <template #suffix>
                            <div>
                                <el-button @click="onSubmit" type="primary">搜索</el-button>
                            </div>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button icon="el-icon-plus" type="primary" @click="onAddAccount()">新建分成者</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div>
            <el-table :data="tableData">
                <el-table-column v-for="col in tableColumn" :prop="col.prop" :key="col.id" :label="col.label"
                    :width="col.width" :min-width="col.minWidth">
                </el-table-column>
                <el-table-column label="分成者状态" width="100px">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.holderStatus" active-color="#13ce66" inactive-color="#ff4949"
                            @change="holderStatusChange(scope.row)" :active-value="1" :inactive-value="2">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120px">
                    <template slot-scope="scope">
                        <el-button @click="resetPassword(scope.row.shareholder)" type="text" size="small">重置密码</el-button>
                        <el-button type="text" size="small" @click="onEditAccount(scope.row)">编辑</el-button>
                        <!-- <el-button type="text" size="small">查看</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination layout="prev, pager, next,total" :total="tableTotal" :page-size="form.pageSize"
                @current-change="handleCurrentChange">
            </el-pagination>
        </div>
        <el-dialog :title="dialogTitle" :visible.sync="showDialog" width="50%">
            <div class="topTip">
                <span>当前剩余分成比例：</span>
                <span>{{ surplusRadio }}%</span>
            </div>
            <Form :formItem="activeFormItem" ref="getForm" />
            <div class="bottomTip">
                新增分成者初始密码: admin123456
            </div>
            <span slot="footer">
                <el-button @click="onClick" type="primary">确定</el-button>
                <el-button type="primary" @click="showDialog = false">取消</el-button>
            </span>
        </el-dialog>
        <el-dialog title="确定重置密码？" :visible.sync="showResetPasswordDialog" width="25%">
            <span style="margin: 20px 0;display: inline-block;">密码将被重置为admin123456</span>
            <span slot="footer">
                <el-button @click="resetPasswordSubmit" type="primary">确定</el-button>
                <el-button type="primary" @click="showResetPasswordDialog = false">取消</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
// 引入table列数据
import { tableColumn } from './tableConfig'
// 引入form设定
import { addFormItem, editFormItem } from './formConfig'
import { accountChildrenList, accountDtail, accountCreate, accountUpdate, radioUpdate } from '@/api/accountChildren'
import { resetPassword } from "@/api/sysUser";
// 引入form组件
import Form from "@/components/form"
export default {
    components: {
        Form
    },
    data() {
        return {
            tableData: [],
            tableColumn: tableColumn,
            activeFormItem: [],
            addFormItem: addFormItem,
            editFormItem: editFormItem,
            showDialog: false,
            form: {
                pageNo: 1,
                pageSize: 10,
                searchKey: ""
            },
            dialogTitle: "",
            surplusRadio: 0,
            isAdd: false,
            tableTotal: 0,
            id: null,
            showResetPasswordDialog: false,
            shareholder: null
        }
    },
    mounted() {
        this.getTableData()
    },
    methods: {
        onClick() {
            if (this.isAdd) {
                accountCreate(this.$refs.getForm.form).then(res => {
                    if (res.message.code === 0) {
                        this.$message({
                            message: '新增分成者成功',
                            type: 'success'
                        })
                    } else {
                        this.$message({
                            message: res.message.message,
                            type: 'fail'
                        })
                    }
                })
            } else {
                radioUpdate(this.$refs.getForm.form).then(res => {
                    if (res.message.code === 0) {
                        this.$message({
                            message: '编辑成功',
                            type: 'success'
                        })
                    } else {
                        this.$message({
                            message: res.message.message,
                            type: 'fail'
                        })
                    }
                })
            }
            this.getTableData()
            this.getAccountDtail()
            this.showDialog = false;
        },
        onSubmit() {
            this.getTableData()
        },
        onAddAccount() {
            this.getAccountDtail()
            this.activeFormItem = this.addFormItem
            this.dialogTitle = '新增分成者'
            this.showDialog = true;
            this.isAdd = true
        },
        onEditAccount(row) {
            this.getAccountDtail()
            this.activeFormItem = this.editFormItem
            this.isAdd = false
            this.dialogTitle = '编辑分成者'
            this.showDialog = true;
            this.$nextTick(() => {
                this.$refs.getForm.form = {
                    useraccount: row.loginAccount,
                    buyDate: row.createTime,
                    id: row.id,
                    mobile: row.mobile,
                    realName: row.realName,
                    address: row.address,
                    holderRatio: row.holderRatio
                }
                this.id = row.id
                this.holderRatio = row.holderRatio
            })
        },
        resetPassword(userId) {
            this.showResetPasswordDialog = true;
            this.shareholder = userId

        },
        resetPasswordSubmit() {
            resetPassword({ userId: this.shareholder }).then(res => {
                if (res.message.code === 0) {
                    this.$message({
                        message: '密码重置成功',
                        type: 'success'
                    })
                } else {
                    this.$message({
                        message: res.message.message,
                        type: 'fail'
                    })
                }
            })
            this.showResetPasswordDialog = false;
        },
        getAccountDtail() {
            accountDtail(this.$store.state.user.userId).then(res => {
                console.log(res);
                this.surplusRadio = res.data.surplusRadio
                if (this.isAdd) {
                    this.addFormItem[3].max = this.surplusRadio
                } else {
                    this.editFormItem[3].max = this.surplusRadio
                }

            })
        },
        getTableData() {
            accountChildrenList(this.form).then(res => {
                this.tableData = res.data.list
                this.tableTotal = res.data.total
                console.log(this.tableData);
            })
        },
        handleCurrentChange(pageNo) {
            this.form.pageNo = pageNo
            this.getTableData()
        },
        holderStatusChange(row) {
            var messageText = ''
            if (row.holderStatus == 1) {
                messageText = '打开成功'
            } else {
                messageText = '关闭成功'
            }
            accountUpdate({
                holderStatus: row.holderStatus,
                id: row.id
            }).then(res => {
                if (res.message.code == 0) {
                    this.$message({
                        message: messageText,
                        type: 'success'
                    })
                } else {
                    this.$message({
                        message: '设置失败，请联系管理员',
                        type: 'success'
                    })
                }
                this.getTableData()
            })
        }
    },
}
</script>
<style lang="scss" scoped>
.body {
    padding: 20px;
}

::v-deep .el-input {
    width: 280px;
}

::v-deep .el-table__fixed-right::before {
    background-color: transparent;
}

::v-deep .el-pagination {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.topTip,
.bottomTip {
    margin: 15px 0;
}

.topTip {
    color: rgb(255, 73, 73);
    font-size: 16px;
}

::v-deep .el-dialog__body {
    padding: 0 20px;
    color: #617d97;
}
</style>